<template>
  <div class="home">
    <div style="display: flex; justify-content: right;">
        <el-button type="primary" @click="save">保存</el-button>
    </div>
    <avue-crud
      ref="crud"
      :option="option"
      :data="data"
    >
        <template slot="fixedPrice" slot-scope="{row}">
            <el-input
                v-if="!['一', '二'].includes(row.index)"
                placeholder="请输入"
                v-model="row.fixedPrice"
                clearable />
            <span v-else>{{ row.fixedPrice }}</span>
        </template>
        <template slot="total" slot-scope="{row}">
            <el-input
                v-if="!['一', '二'].includes(row.index)"
                placeholder="请输入"
                v-model="row.total"
                clearable />
            <span v-else>{{ row.total }}</span>
        </template>
    </avue-crud>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
      option: {
        menu: false,
        border: true,
        addBtn: false,
        addRowBtn: false,
        cellBtn: true,
        columnBtn: false,
        refreshBtn: false,
        menuWidth: 250,
        column: [
          {
            label: "序号",
            prop: "index",
          },
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "单位",
            prop: "unit",
          },
          {
            label: "工程量",
            prop: "volume",
          },
          {
            label: "固定综合单价",
            prop: "fixedPrice",
            slot: true
          },
          {
            label: "总价",
            prop: "total",
            slot: true
          },
          {
            label: "备注",
            prop: "remark",
          },
        ],
      },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
        this.data = [
            {
            id: 0,
            index: '一',
            name: '800m跨越段',
            unit: '',
            volume: '',
            fixedPrice: '',
            total: '',
            remark: '',
            },
            {
            id: 1,
            index: '1',
            name: '桩基工厂',
            unit: 'm',
            volume: '3900(暂定)',
            fixedPrice: '10',
            total: '20',
            remark: '管桩倒运',
            },
            {
            id: 2,
            index: '2',
            name: '承台浇筑工程',
            unit: 'm³',
            volume: '1410',
            fixedPrice: '',
            total: '',
            remark: '承台',
            },
        ];
    },
    save() {
        this.$confirm(this.data, '保存成功');
        console.log('save', this.data);
    }
  },
};
</script>
<style lang="less" scoped>
.home {
    ::v-deep .el-input__inner {
        background-color: transparent;
        border: 0;
    }
}
</style>
